<template>
  <div>
    <el-button @click="showDialog(1)" type="primary">新增权限</el-button>
    <br>
    <br>
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :border=true
      :stripe=true
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="type" label="类型" >
        <template slot-scope="scope">
          <el-tag :type="scope.row.type == 1 ? 'primary' : 'success'" >{{scope.row.type == 1 ?"菜单":"按钮"}}</el-tag>
        </template>
      </el-table-column>
       <el-table-column prop="icon" label="图标">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
      </el-table-column>
      <el-table-column prop="url" label="地址"></el-table-column>
      <el-table-column prop="sort" sortable label="排序"></el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog width="700px" title="新增权限" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form :model="form" :label-width="formLabelWidth">
        <el-form-item label="类型" >
          <el-radio-group v-model="form.type" @change="handleRadioChange">
            <el-radio label="1">菜单</el-radio>
            <el-radio label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" style="width:305px;">
          <el-popover placement="bottom-start" width="160" v-model="visible" >
            <el-input placeholder="一级菜单" slot="reference" :value="form.pid" v-model="form.pName" clearable @keyup.native="inputChange"></el-input>
            <el-tree
              :data="data"
              :props="defaultProps"
              accordion
              :expand-on-click-node="false"
              @node-click="handleNodeClick">
            </el-tree>
          </el-popover>
        </el-form-item>
        <el-form-item label="跳转地址" >
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" >
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" >
          <el-input-number v-model="form.sort" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">新 增</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getPowerList, savePower, updatePower, deletePower } from '../../api/apis'
  export default {
    data() {
      return {
        visible:false,
        loading: false,
        tableData: [],
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        type: null,
        dialogFormVisible: false,
        form: {
          type: '1',
          name: '',
          pid: null,
          pName: '',
          url: '',
          icon: '',
          sort: ''
        },
        formLabelWidth: '120px'
      }  
    },
    created(){
      this.init();
    },
    methods: {
      init(){
        this.loading = true;
        getPowerList().then( (res)=> {
          this.loading = false;
          if(res.status === 200 ){
            if(res.data.code == 0){
              // console.log(res.data.data)
              this.tableData = res.data.data;
              this.data = res.data.data;
            }
          }else{
            this.$message.error(res.data.msg)
          }
        })
        .catch(function(error){
          console.log(error);
        });
      },
      /* 显示新增弹窗 */
      showDialog(val){
        this.type = val;
        this.form = {};
        this.form.type = '1';
        this.dialogFormVisible = true;
      },
      /* 改变权限类型 */
      handleRadioChange(val){
        this.form.type = val;
      },
      /* 新增权限 */
      onSubmit(){
        this.form.pName = this.form.pName == ''? 0: this.form.pName  
        if(this.type == 1){
          savePower(this.form).then( (res)=> {
             console.log(res)
            if(res.status === 200 ){
              if(res.data.code == 0){
                this.$message({
                  type: 'success',
                  message: '新增权限成功!'
                });
                this.init();
                this.dialogFormVisible = false;
              }
            }else{
              this.$message.error(res.data.msg)
            }
          })
          .catch(function(error){
            console.log(error);
          });
        }else{
          updatePower(this.form).then( (res) =>{
            // console.log(res);
            if(res.status ===200 ){
              if(res.data.code == 0){
                this.$message({
                  type: 'success',
                  message: '修改权限成功!'
                });
                this.init();
                this.dialogFormVisible = false;
              }
            }
          })
          .catch(function(error){
            console.log(error);
          });
        }
      },
      /* 编辑权限 */
      handleEdit( row ) {
        // console.log(row)
        this.dialogFormVisible = true;
        this.form = row;
        if(row.pName == null){
          this.form.pName = '/'
        }
        this.type = 2;
        this.form.type = row.type.toString();
      },
      /* 删除权限 */
      handleDelete(index, row) {
        this.$confirm('确定要删除该权限吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletePower({ id: row.id }).then( (res)=> {
            // console.log(res)
            if(res.status === 200 ){
              if(res.data.code == 0){
                this.$message({
                  type: 'success',
                  message: '删除权限成功!'
                });
                this.init();
              }
            }else{
              this.$message.error(res.data.msg)
            }
          })
          .catch(function(error){
            console.log(error);
          });
        }).catch(() => {
                  
        });
      },
      handleNodeClick(data) {
        // console.log(data)
        this.form.pid = data.id;
        this.form.pName = data.label;
        this.visible = false;
      },
      /* 限制上级菜单输入 */
      inputChange(){
        this.form.pid = 0;
        this.form.pName = '';
      },
      handleChange(value) {
        // console.log(value);
      },
     
    }
  }
</script>